<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Custom Icon </TITLE>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <link href="../../../css/demo.css" rel="stylesheet" type="text/css">
    <link href="../../../css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
    <script src="../../../js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../../../js/jquery.ztree.core.js" type="text/javascript"></script>
    <!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes = [
            {
                id: 1,
                pId: 0,
                name: "Custom Icon 01",
                open: true,
                iconOpen: "../../../css/zTreeStyle/img/diy/1_open.png",
                iconClose: "../../../css/zTreeStyle/img/diy/1_close.png"
            },
            {id: 11, pId: 1, name: "leaf node 01", icon: "../../../css/zTreeStyle/img/diy/2.png"},
            {id: 12, pId: 1, name: "leaf node 02", icon: "../../../css/zTreeStyle/img/diy/3.png"},
            {id: 13, pId: 1, name: "leaf node 03", icon: "../../../css/zTreeStyle/img/diy/5.png"},
            {id: 2, pId: 0, name: "Custom Icon 02", open: true, icon: "../../../css/zTreeStyle/img/diy/4.png"},
            {id: 21, pId: 2, name: "leaf node 01", icon: "../../../css/zTreeStyle/img/diy/6.png"},
            {id: 22, pId: 2, name: "leaf node 02", icon: "../../../css/zTreeStyle/img/diy/7.png"},
            {id: 23, pId: 2, name: "leaf node 03", icon: "../../../css/zTreeStyle/img/diy/8.png"},
            {id: 3, pId: 0, name: "no Custom Icon", open: true},
            {id: 31, pId: 3, name: "leaf node 01"},
            {id: 32, pId: 3, name: "leaf node 02"},
            {id: 33, pId: 3, name: "leaf node 03"}

        ];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>
</HEAD>

<BODY>
<h1>Custom Icon - icon</h1>
<h6>[ File Path: core/custom_icon.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul class="ztree" id="treeDemo"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>1, Explanation of setting</h2>
                <ul class="list">
                    <li>Custom icon does not require special configuration setting.</li>
                </ul>
            </li>
            <li class="title"><h2>2, Explanation of treeNode</h2>
                <ul class="list">
                    <li>Use node data’s icon / iconOpen / iconClose attribute show custom icon.</li>
                    <li class="highlight_red">See the API documentation for more related contents.</li>
                </ul>
            </li>
            <li class="title"><h2>3、Other explanation</h2>
                <ul class="list">
                    <li class="highlight_red">Because of the time limitation, demo uses png images, if you need
                        transparent images in IE6 browser, make a gif image, or use a special 'css filter' on ie6
                        browser.
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</BODY>
</HTML>